﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String roleId = String.valueOf(request.getSession().getAttribute("roleId"));
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<title>中国中车地图</title>
  <!-- base -->
  <link rel="stylesheet" href="${path}/resource/css/base.css">
 
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="${path}/resource/plugins/bootstrap/css/bootstrap.min.css"> 
  
  <!-- main -->
  <link rel="stylesheet" href="${path}/resource/css/ysrmain.css">
  <link rel="stylesheet" href="${path}/resource/css/main.css">
  <!-- echarts JS-->
  <script type="text/javascript" src="${path}/resource/js/echarts.min.js"></script>

<style type="text/css">
	html,body{height: 100%;}
	
	
	.wx-btn .ab{
		display:none;
	}
	.wx-btn{
		padding-top:20px;
		height:80px;
		padding-bottom:10px;
	}
	.table{
		margin-bottom: 0;
	}
	.color-m1{
		color:#20FCFF;
	}
	.color-w{
		color:#fff;
	}
	.ab .left-a{
		position:absolute;
		left:10%;
	}
	.ab .right-a{
		position:absolute;
		right:10%;
	}
	/*底部改动*/
	.anchorBL{display:none;}
	.bottom-item {
	    width: 100%;
	    background-size: 100%;
	    position: fixed;
	    bottom: 0px;
	    height: 11%;
	}
	.foot-line{
		background:url(${path}/resource/images/foot-line2.png) no-repeat;
		background-size:100% 100%;
		height:100%;
		
		
	}
	.glxt{
		background:url(${path}/resource/images/glxt2.png) no-repeat;
		background-size:100% 100%;
  		position: fixed;
	    display: block;
	    width: 13%;
	    height: 6%;
	    bottom: 4%;
	    left: 17.8%;
		cursor: pointer;		      		   
	}
	.jkxt{
		background:url(${path}/resource/images/jkxt2.png) no-repeat;
		background-size:100% 100%;
		 position: fixed;
		 display: block;
		 width: 13%;
		height: 6%;
		bottom: 4%;
		
		 cursor:pointer;
		 left: 68.8%;		 
	}
	.foot-content{
		margin-left:30%;
		width:40%;
		
		
		height:100%;
	}
	.foot-content>div{
		width: 33%;
	    float: left;
	    height: 100%;
	    display:table
	}
	.foot-content .foot-img{
		    width: 50%;
		    height: 100%;		    
		    display: table-cell;
		    vertical-align: middle;
		    text-align: right;
	}
	.foot-content .foot-span{
			width: 50%;
		    height: 100%;		    
		    display: table-cell;
		    vertical-align: middle;
		    text-align: left;
	}
	.foot-span span{
		font-size:2em;
		color:#20FCFF;
	}
	.foot-content img{
		width:5em;
		padding: 0.5rem;
		
	}
	.top{
		background:url(${path}/resource/images/top-line.png) no-repeat;
		background-size:100% 100%;
		height:10%;
		border-bottom:none;
		box-shadow:none;
	}
	.top-left {
	    text-align: left;
	    padding-left: 3%;
	    padding-top: 10px;
	    height: 55%;
	    float: left;
	}
	.top-left img{
		height:100%;
	}
	.top-right {
	    text-align: right;
	  
	    line-height: 4.5em;
    }
   	.progress{
   		width:67%;
   		display: inline-block;
   		margin-bottom: 0;
   		background:none;
   		height:0.9em;
   		
   	}
   	.progress-bar{
   		background-color: #20FCFF;
   	}
   	.progress-list{
   		line-height:20px;
   		padding: 2px 0.6em;
   	}
   	.count h4,.year-msg h4{
   		padding-left:5px;
   	}
   	.year-msg h4{
   		margin-top:0;
   		padding-top:10px;	
   	}
   	.table tr{
   		border-bottom:1px solid #fff ;
   	}
   	.wrapper{
   		background:url(${path}/resource/images/zsbg2.png) no-repeat;
		background-size:100% 100%;
   	}
   	.animation-img{
   		animation: myfirst 5s linear 0s infinite normal;
		/* Firefox: */
		-moz-animation: myfirst 5s linear 0s infinite normal;
		/* Safari 和 Chrome: */
		-webkit-animation: myfirst 5s linear 0s infinite normal;
		/* Opera: */
		-o-animation: myfirst 5s linear 0s infinite normal;
   	}
   	@keyframes myfirst{
   		0%   {transform:rotate(0deg);}
		100% {transform:rotate(359deg);}

   	}
</style>
</head>
<body >

<div class="wrapper" style="height:100%">
    <div class="top">
		<div class="top-left">
		<img src="${path}/resource/images/logo_white.png" class="float-l"></img>	
		</div>
		<div class="top-right">
		<%-- <span class="color-w btn-white btn-left"><img src="${path}/resource/ysr/images/icon_user.png" class="back-icon"></span><span class="color-w btn-no margin-r-1">admin</span>		
				
		<span class="color-w btn-all"><a class="color-3" >退出系统 <img src="${path}/resource/ysr/images/back.png" class="back-icon"></a></span> --%>

		</div>
	</div>
	<!-- /.content-wrapper -->
	
	<!--/.control-sidebar-bg-->
    <div class="map-wrap" style="height:100%">
        <div class="map-mid">
            <div class="map-mid-item" style="position:inherit;">
            	<div style="top:20px;right:300px;">
            		<div class="zst" style="display: none;">
						<!----地图锚点-->
						<div class="locat-item"><a href="" class="local_01"><img src="${path}/resource/images/icon_local.png" /></a></div>
						<div class="locat-item1"><a href="" class="local_01"><img src="${path}/resource/images/icon_local.png" /></a></div>
						<div class="locat-item2"><a href="" class="local_01"><img src="${path}/resource/images/icon_local.png" /></a></div>
						<div class="locat-item3"><a href="" class="local_01"><img src="${path}/resource/images/icon_local.png" /></a></div>
						<div class="locat-item4"><a href="" class="local_01"><img src="${path}/resource/images/icon_local.png" /></a></div>
						<div class="locat-item5"><a href="" class="local_01"><img src="${path}/resource/images/icon_local.png" /></a></div>
						<div class="locat-item6"><a href="" class="local_01"><img src="${path}/resource/images/icon_local.png" /></a></div>
	                   
						<div class="t-box blue" style="position:relative;top:179px;left:1401px;display:none;">
	                    	<div class="ac" style="border-bottom: 1px solid rgb(62, 243, 68); padding-bottom: 10px;"><img src="${path}/resource/images/gx_08.png"/></div>
							<div class="mt10">
								<span class="al">设备型号：</span>
								<span class="ar">369</span>
							</div>
							<div class="mt10">
								<span class="al">位置信息：</span>
								<span class="ar">宁波市</span>
							</div>
							<div class="mt10">
								<span class="al">运行情况：</span>
								<span class="ar">正常</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
       	
    	<!--/.map-mid-->
    	<div class="float-wrap">
    		<div class="left-sidebar pull-left">
            	<div class="side-title">
                	<p class="ac" style="letter-spacing:1px;">社会贡献值</p>
                </div>
                <div class="side-box" style="background-color: rgba(61, 89, 113, 0.7);">
                	<div class="all-list">
                	<dl class="a-list">
                    	<dd>
                        	<div class="row">
                            	<div class="col-xs-4">
                                	<img src="${path}/resource/images/icon-yun.png" alt="二氧化碳"/>
                                 </div>
                                <div class="col-xs-8" style="">
                                	<div style="margin-bottom:-8px;"><span id="co2" class="color-m1" style="font-size:2.8em;">1500</span><span class="color-w" >千克</span></div><p  class="color-w" style="margin-top:5px">CO2减排</p>
                                </div>
                            </div>
                        </dd>
                        <dd>
                        	<div class="row">
                            	<div class="col-xs-4">
                                	<img src="${path}/resource/images/icon-dian.png" alt="二氧化碳"/>
                                 </div>
                                <div class="col-xs-8" style="">
                                	<div style="margin-bottom:-8px;"><span id="electric" class="color-m1"  style="font-size:2.8em;">2000</span><span class="color-w" >度</span></div><p class="color-w" style="margin-top:5px">耗电节省</p>
                                </div>
                            </div>
                        </dd>
                        <dd>
                        	<div class="row">
                            	<div class="col-xs-4">
                                	<img src="${path}/resource/images/icon-mei.png" alt="二氧化碳"/>
                                 </div>
                                <div class="col-xs-8" style="">
                                	<div style="margin-bottom:-8px;"><span id="coal" class="color-m1" style="font-size:2.8em;">3000</span><span class="color-w" >吨</span></div><p class="color-w" style="margin-top:5px">燃煤节省</p>
                                </div>
                            </div>
                        </dd>
                        <div class="clear"></div>
                    </dl>
                   <div class="mt20">
                   	<h4 class="color-w " style="padding-left:5px">运维总量</h4>
                	<ul class="msb-list" style="font-size:13px">
                    	<li>
                        	<div class="pull-left">装机总容量：</div>
                            <div class="pull-right" id="zongrongliang">60000KW</div>
                            <div class="clear"></div>
                        </li>
                     	<li>
                        	<div class="pull-left">运行总时长：</div>
                            <div class="pull-right" id="runtime">290h</div>
                            <div class="clear"></div>
                        </li>
                    	<li>
                        	<div class="pull-left">设备运行率：</div>
                            <div class="pull-right" id="yunxinglv">8%</div>
                            <div class="clear"></div>
                        </li>
                        <div class="clear"></div>
                    </ul>
                    </div>
                </div>
                    <div style="border-top:1px solid rgb(59, 57, 57);">
                        	<a href="javascript:return false;" id="up" class="btn-up ac"><img src="${path}/resource/images/arrow_up.png"/></a>
                    </div>
                    
                </div>
                
                <div class="">
                	<div class="row wx-btn">
                    	<div class=" ac ab ">
                        	<a  class="left-a" href="<%=path%>/common/redirect/satellite">卫星图</a>
                        </div>
                        <div class=" ac ab">
                        	<a  class="right-a" href="javascript:void(0)" >展示图</a>
                        </div>
                    </div>
                </div>
    		</div>
    		<!--/.left-sidebar-->
            <div class="right-sidebar pull-right">
            	<div class="side-title">
                	<p class="ac" style="letter-spacing:1px;">设备统计值</p>
                </div>
                <div class="side-box" style="background-color:rgba(61, 89, 113, 0.7);">
                	<div class="change">
                		<div class="year-msg">
	                		<h4 class="color-w">年统计数据</h4>
	                		<div id="container" style="width:100%;height: 14em;"></div>
	                	</div>
	                    <table class="table" id="yeartable">
	                            <tbody>
	                                <tr>
	                                    <td class="color-m1 al">2014</td>
	                                    <td class="color-m1 ac">200</td>
	                                    <td class="color-m1 ar">+25%</td>
	                                </tr>
	                                <tr>
	                                    <td class="color-m1 al">2015</td>
	                                    <td class="color-m1 ac">350</td>
	                                    <td class="color-m1 ar">+55%</td>
	                                </tr>
	                                <tr>
	                                    <td class="color-m1 al">2016</td>
	                                    <td class="color-m1 ac">390</td>
	                                    <td class="color-m1	 ar">+35%</td>
	                                </tr>
	                            </tbody>
	                        </table>
                    	
	                    	<div class="count">
	                        	<h4 class="color-w">月数据统计</h4>
	                        	<div class="progress-list">
									<span class="color-w">1月</span>
									<div class="progress">
									  <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
									    <!-- <span class="sr-only">40% Complete</span> -->
									  </div>
									</div>
									<span class="color-w">40</span>
								</div>
								<div class="progress-list">
									<span class="color-w">2月</span>
									<div class="progress">
									  <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
									    <span class="sr-only">50% Complete</span>
									  </div>
									</div>
									<span class="color-w">50</span>
								</div>
								<div class="progress-list">
									<span class="color-w">3月</span>
									<div class="progress">
									  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
									    <span class="sr-only">60% Complete</span>
									  </div>
									</div>
									<span class="color-w">55</span>
								</div>
								<div class="progress-list">
									<span class="color-w">4月</span>
									<div class="progress">
									  <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
									    <span class="sr-only">70% Complete</span>
									  </div>
									</div>
									<span class="color-w">60</span>
								</div>
								<div class="progress-list">
									<span class="color-w">5月</span>
									<div class="progress">
									  <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
									    <span class="sr-only">80% Complete</span>
									  </div>
									</div>
									<span class="color-w">65</span>
								</div>
								<div class="progress-list">
									<span class="color-w">5月</span>
									<div class="progress">
									  <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
									    <span class="sr-only">80% Complete</span>
									  </div>
									</div>
									<span class="color-w">65</span>
								</div>
	                        </div>	
	                                            	
	                     
                        
                    	</div>
                </div>
                <div style="border-top:1px solid rgb(1, 29, 76);">
                        	<a href="javascript:return false;" id="btn-up" class="btn-up ac"><img src="${path}/resource/images/arrow_up.png"/></a>
                 </div>
            </div>
            <!--/.right-sidebar-->
            <div class="clear"></div>
        	<!--/.clearfix-->
        </div>
    	<!--/.float-wrap-->
    </div>
    
    <!--/.map-wrap-->
</div>
<!-- ./wrapper -->
<footer class="bottom-item" >
	<div class="foot-line">
		<div class="foot-content">
			<div>
				<div class="foot-img">
					<img  class="animation-img" alt="" src="${path}/resource/images/equip_01.png">
				</div>
				<div class="foot-span">
					<span id="allnum" >200</span><span>台</span><br>
					<span>全部设备</span>
				</div>
			</div>
			<div>
				<div class="foot-img">
					<img class="animation-img" alt="" src="${path}/resource/images/equip_02.png">
				</div>
				<div class="foot-span">
					<span id="runnum" >200</span><span>台</span><br>
					<span>运行设备</span>
				</div>
			</div>
			<div>
				<div class="foot-img">
					<img class="animation-img" alt="" src="${path}/resource/images/equip_03.png">
				</div>
				<div class="foot-span">
					<span id="errornum" >200</span><span>台</span><br>
					<span>故障设备</span>
				</div>
			</div>
		</div>
	</div>
	
	<%-- <div class="bottom-t-btn">
		<div class="pull-left">
			<a href="<%=path%>/manage"><img src="${path}/resource/images/glxt.png" style="width:150px;"/></a>
		</div>
		<div class="pull-right">
			<a href="#"><img src="${path}/resource/images/jkxt_over.png" style="width:150px;"/></a>
		</div>
		<div class="clear"></div>
	</div> 
	<div style="width:190px;margin:0 auto;position:relative;top:-55px;"><img src="${path}/resource/images/bootom_logo.png" alt="空调变频器分布信息" /></div>--%>
</footer>
<!--btn-->
<%if("管理员".equals(roleId)) {%>
<a class="glxt" href="<%=path%>/monitor/redirect/equipManage"></a>
<%} else{ %>
<a class="glxt"></a>
<%} %>
<a class="jkxt" href="<%=path%>/manage/redirect/allEquip/allEquipList"></a>
<!--/.bottom-wrap-->

<!-- jQuery 2.2.3 -->
<script src="${path}/resource/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="${path}/resource/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="${path}/resource/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="${path}/resource/dist/js/app.min.js"></script>
<!-- Sparkline -->
<script src="${path}/resource/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="${path}/resource/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="${path}/resource/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="${path}/resource/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="${path}/resource/plugins/chartjs/Chart.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes)
<script src="${path}/resource/dist/js/pages/dashboard2.js"></script> -->
<!-- AdminLTE for demo purposes -->
<script src="${path}/resource/dist/js/demo.js"></script>
<script type="text/javascript">
/*切换显示  */
 	 $(function(){
		$(".wx-btn").mouseover(function(){
			$(".ab").show(500);
		}).mouseleave( function(){
	          $(".ab").hide(500);
	    });
		
		$("#up").click(function(){
			  $(".all-list").slideToggle();
		});
		$("#btn-up").click(function(){
			  $(".change").slideToggle();
		});
		
	})
	
	
	
/*  */
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
//     option = {
//         title: {
//             text: ''
//         },
// 		backgroundColor:['#337ab7'],
//         //color:['#fff','#20FCFF'],
//         tooltip: {
//             trigger: 'axis'
//         },
//         xAxis:  {
//             type: 'category',
//             boundaryGap: false,
//             data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
//         },
//         yAxis: {
//             type: 'value',
//             axisLabel: {
//                 formatter: '{value} W'
//             }
//         },
//         grid: {
// 	        left: '0',
// 	        right: '0',
// 	        bottom: '0',
// 	        top: '10%',
// 	        containLabel: true
// 	    },
//         visualMap: {
//             show: false,
//             dimension: 0,
//             pieces: [{
//                 lte: 6,
//                 //color: 'green'
//             }, {
//                 gt: 6,
//                 lte: 8,
//                 //color: 'red'
//             }, {
//                 gt: 8,
//                 lte: 14,
//                 //color: 'green'
//             }, {
//                 gt: 14,
//                 lte: 17,
//                 //color: 'red'
//             }, {
//                 gt: 17,
//                 //color: 'green'
//             }]
//         },
//         series: [
//             {
//                 name:'用电量',
//                 type:'line',
//                 smooth: true,
//                 data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
//                 markArea: {
//                     data: [ [{
//                         xAxis: '07:30'
//                     }, {
//                         xAxis: '10:00'
//                     }], [{
//                         xAxis: '17:30'
//                     }, {
//                         xAxis: '21:15'
//                     }] ]
//                 }
//             }
//         ]
//     };
	option = {
			backgroundColor:['#337ab7'],
			xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15']
		    },
		    yAxis: {
		        type: 'value',
		    },
		    grid: {
	 	        left: '0',
	 	        right: '5%',
	 	        bottom: '0',
	 	        top: '10%',
	 	        containLabel: true
	 	    },
	 	   	tooltip: {
		    	x:'right',
		        trigger: 'axis'
		    },
		    series: [
		             {
		                 name:'数量',
		                 type:'line',
		                 smooth: true,
		                 data:[200,180,220, 210, 224, 215, 150,215,280,200,220,110,120,110,200],
		             
		             }
		     ]
	};
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<script type="text/javascript" src="${path}/resource/js/webSocketConf.js"></script>	
<script type="text/javascript" src="${path}/resource/js/testMapData.js"></script>
<script type="text/javascript">

	var map;
	
	var livedata;
	$(function(){
		//jiekou(); 
		yearCount();
		monthCount();
		commonIndextotal();
	})
	
	function monthCount(){
		$.ajax({
			url : '<%=path%>/common/commonIndexDevMonthCount',//dataapi/commonIndexDevMonthCount',
			data : { },
	        type : 'post',
	        dataType : 'json',
	        async : false,	        
	        success : function(result) {
	        	if(result.status == "OK") {
		        	var data = result.data;
		        	console.log(data);
		        	$.each(data,function(i) {
		        		$($($('.progress-list')[i]).children('span')[0]).text(data[i].month);
		        		$($($('.progress-list')[i]).children('span')[1]).text(data[i].count);
		        		var percent = (data[i].percent*100).toString() + "%";
		        		$($('.progress-list')[i]).children('.progress').children('.progress-bar').css("width", percent);
		        		
		        	});
	        	}
		        	/* <div class="progress-list">
					<span class="color-w">5月</span>
					<div class="progress">
					  <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
					    <span class="sr-only">80% Complete</span>
					  </div>
					</div>
					<span class="color-w">65</span>
				</div> */
			},			
			error : function(result) {
				console.log('error');
	        	console.log(result);
			}
		});	
	}
	
	function yearCount(){
		$.ajax({
			url : '<%=path%>/common/commonIndexDevYearCount',//dataapi/commonIndexDevYearCount',
			data : {},
	        type : 'post',
	        dataType : 'json',
	        async : false,	        
	        success : function(result) {
	        	if(result.status == "OK") {
		        	var data = result.data;
		        	var xAxis = [];
		        	var seriesdata = [];
		        	var html = '';
		        	$.each(data,function(i) {
		        		xAxis.push(data[i].year);
		        		seriesdata.push(data[i].count);
		        		var increase = (data[i].increase*100).toString();
						if(increase.indexOf(".") > 0) {
							increase = increase.substring(0, increase.indexOf(".")+3);
						}
		        		html += '<tr><td class="color-m1 al">'+data[i].year+'</td>'+
				        		'<td class="color-m1 ac">'+data[i].count+'</td>'+
				        		'<td class="color-m1 ar">'+increase+'%</td></tr>';
		        	});
		        	option.xAxis.data = xAxis;
		        	option.series[0].data = seriesdata;
		        	myChart.setOption(option, true);
		        	
		        	$('#yeartable tbody').html(html);
		        	
		        	
	        	}
			},			
			error : function(result) {
				console.log('error');
			}
		});	
	}
	
	//装机总容量
	function commonIndextotal(){
		$.ajax({
			url : '<%=path%>/common/commonIndextotal',
			data : { },
	        type : 'post',
	        dataType : 'json',
	        async : false,	        
	        success : function(result) {
	        	console.log('success:');
	        	console.log(result);
	        	if(result.status == "OK") {
	        		var data = result.data;
	        		$('#zongrongliang').text(data.powertotal+"kW");
	        		$('#runtime').text(data.runtimetotal+"h");
	        	}
			},			
			error : function(result) {
				console.log('error');
	        	console.log(result);
			}
		});	
	}

	
	var yunxinglv = 0;
	function jiekou(){
		$.ajax({
			type : 'POST',
			url : '<%=path%>/common/commonIndex',
			data : {livedata : livedata},
			dataType : 'json',
			async : false,
			success : function(result) {
				if(result.status == "OK") {
					var numarray = eval("(" + result.data.numarray + ")");
					$('#runnum').text(numarray[0]);
					$('#errornum').text(numarray[1]);
					$('#allnum').text(numarray[2]);
					yunxinglv = numarray[0]/numarray[2];
					yunxinglv = yunxinglv*100;
					var yxl = yunxinglv.toString();
					if(yxl.indexOf(".") > 0) {
						yxl = yxl.substring(0, yxl.indexOf(".")+2);
					}
					$('#yunxinglv').text(yxl + "%");
					
					var costlist = eval("(" + result.data.costlist + ")");
					var electric = costlist[0].toString();
					if(electric.indexOf(".") > 0) {
						electric = electric.substring(0,6);
					} else {
						electric = electric.substring(0,5);
					}
					$('#electric').text(electric);
					var co2 = costlist[1].toString();
					if(co2.indexOf(".") > 0) {
						co2 = co2.substring(0,6);
					} else {
						co2 = co2.substring(0,5);
					}
					$('#co2').text(co2);
					var coal = costlist[2].toString();
					if(coal.indexOf(".") > 0) {
						coal = coal.substring(0,6);
					} else {
						coal = coal.substring(0,5);
					}
					$('#coal').text(coal);
					
				}
			},
			error : function() {
				//alert("系统错误！");
			}
		})
	}
	//获取首页实时数据
	
	var webSocket = null;
	var devArray=new Array();
	if ("WebSocket" in window) {
		webSocket = new WebSocket(webSocketUrl);
		console.log("建立实时连接！");
	} else if ("MozWebSocket" in window) {
		webSocket = new MozWebSocket(webSocketUrl);
		console.log("建立实时连接！");
	} else {
		alert("浏览器不支持！");
	}
	webSocket.onerror = function() {
		alert("无法建立实时连接！");
	};
	webSocket.onopen = function(event) {
		send();
		console.log("open");
	};
	webSocket.onmessage = function() {
		if(event.data.length>2){
			livedata = event.data;
			//alert("livedata :" + livedata);
			jiekou();
			webSocket.close(); 
		}else{
			console.log("resend...");
			send();
		}
	};
	webSocket.onclose = function() {
		console.log("close");
	};
	function send(){    //Websocket接口
	    console.log("send");
// 	    var message = "[{\"serialnum\":\"all\",\"signalnames\":[\"breakerstate\",\"runninglight\",\"faultlight\"]}]"; //调用参数
		var message = "[{\"serialnum\":\"all\",\"signalnames\":[\"c196\",\"c78\",\"c77\"]}]"; //调用参数
	    webSocket.send(message);
	};
	window.onbeforeunload = function (e) { 
		e = e || window.event; 
		if (e) { 
			webSocket.close();
		} 
	};
</script>
</body>
</html>
